<script setup lang="ts">
    import {ref} from 'vue'
    import Child from './Child.vue'
    //父组件的数据=>传给子组件
    let dog = ref('泰迪')
    let age = ref(18)

    //复杂一点的是子传父,属性值是函数
    let jiangzhuang = ref('无')

    //特点为子组件准备的 - 由子组件来调用的
    function getJaingZhuang(v:string,e: any){
        jiangzhuang.value = v
        console.log(e)//代表事件对象,由html标签触发的
    }

    function getJaingZhuangEvent(e: string){
        console.log(e)
        jiangzhuang.value = e
    }

    function getJaingZhuangEventArgs(c1: string,c2: any){
        console.log(c1,c2)
        jiangzhuang.value = c1
    }

</script>
<template>
    <h1>Custom-emits-父组件</h1>
    <h2>子传过来的数据是:{{jiangzhuang}}</h2>
    <hr>
    <!-- 子组件通过自定义事件的方式将数据传给父组件
    sendFather属于自定义事件的名称  @事件名称
    自定义事件的名称推荐使用 xxx-yyy
    -->
    <Child :dogData="dog" :ageData="age" @send-father="getJaingZhuang"/>

    <hr>
    <!-- 事件对象`$event`: 是调用`emit`时所提供的数据，可以是任意类型！！！
    $event代表的子组件传过来的数据
    -->
    <Child @send-father="getJaingZhuangEvent($event)"></Child>

    <Child @send-father="getJaingZhuangEventArgs"></Child>
</template>
<style scoped>
   
</style>